<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>用户登录</p>
    </header>
    <!-- 表单部分 -->
    <ul class="form-box">
      <li>
        <div class="title">
          手机号码：
        </div>
        <div class="content">
          <input type="text" v-model="userId" placeholder="手机号码"   v-number-only  maxlength="11">
        </div>
      </li>
      <li>
        <div class="title">
          密码：
        </div>
        <div class="content">
          <input type="password" v-model="password" placeholder="密码">
        </div>
      </li>
    </ul>
    <div class="button-login">
      <button @click="login">登录</button>
    </div>
    <div class="button-register">
      <button @click="register">去注册</button>
    </div>
    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>
<script>
import Footer from '../components/Footer.vue';
import CryptoJS from 'crypto-js'
import my from "@/views/My.vue";
export default {
  name: 'Login',
  data() {
    return {
      userId: '',
      password: '',
      ReducedValue:0   //过期积分数
    }
  },

  created() {
    this.user = this.$getSessionStorage('user');

    let url = `PointController/updatePointLog/${this.user.userId}`;
    this.$axios.delete(url,{
      headers : {
        'token': sessionStorage.getItem('token')
      }
    }).then(response => {
      this.ReducedValue=response.data.result;
    }).catch(error => {
      console.error(error);
    });
  },

  methods: {
    login() {

      var reg = /^1[34578]\d{9}$/;
      if (!reg.test(this.userId)) {
        alert('手机号码格式错误，请检查！');
        return;
      }

      var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,16}/;
      // if (!passwordreg.test(this.password)) {
      //   alert('密码格式错误！');
      //   return;
      // }

      //登录请求
      //let url1 = `UserController/getUserByIdByPass/${this.userId}/${CryptoJS.SHA256(this.password).toString()}`;
      let url1 = `UserController/getUserByIdByPass/${this.userId}/${this.password.toString()}`;
      this.$axios.get(url1).then(response => {
        let user = response.data.result;
        //console.log(user)
        if (user == ''||user == null) {
          alert('用户名或密码不正确！');
        } else {
          //sessionstorage有容量限制，为了防止数据溢出，所以不将userImg数据放入session中
          user.userImg = '';
          //this.$setSessionStorage('token', user.token);
          this.$setSessionStorage('user', user.user);
          //更新积分，减少过期部分
          let url2 = `PointController/updatePointLog/${this.user.userId}`;
          this.$axios.delete(url2).then(response =>{
            if(response.data.result>0){
              alert('过期积分已移除');
              let url3 = `PointController/savePointTrans/${this.user.userId}/${parseInt(this.ReducedValue)}/${0}`;
              this.$axios.post(url3).then(response => {
                if(response.data.result>0){
                  //   alert('积分明细表更新成功！')
                }else{
                  alert('积分明细表更新失败！')
                }
              }).catch(error => {
                console.error(error);
              });
            }else {
              alert('暂无过期积分，请注意积分期限~')
            }

          }).catch(error => {
            console.error(error);
          });
        }
      }).catch(error => {
        console.error(error);
      });
      this.$router.go(-1);
    },


    register() {
      this.$router.push({
        path: 'register'
      });
    }
  },
  components: {
    Footer
  }
}
</script>



<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background:linear-gradient(#F37373,#F08080,#EF9292);
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/****************** 表单部分 ******************/
.wrapper .form-box {
  width: 100%;
  margin-top: 12vw;
}

.wrapper .form-box li {
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
  display: flex;
  align-items: center;
}

.wrapper .form-box li .title {
  flex: 0 0 18vw;
  font-size: 3vw;
  font-weight: 700;
  color: #666;
}

.wrapper .form-box li .content {
  flex: 1;
}

.wrapper .form-box li .content input {
  border: none;
  outline: none;
  width: 100%;
  height: 4vw;
  font-size: 3vw;
}

.wrapper .button-login {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}

.wrapper .button-login button {
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  color: #fff;
  background:linear-gradient(#F37373,#F08080,#EF9292);
  border-radius: 4px;
  border: none;
  outline: none;
}

.wrapper .button-register {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}

.wrapper .button-register button {
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  /*与上面登陆按钮不同的只有颜色、背景色、边框不同*/
  color: #666;
  background-color: #EEE;
  border: solid 1px #DDD;
  border-radius: 4px;
  border: none;
  outline: none;
}

/****************** 底部菜单部分 ******************/
.wrapper .footer {
  width: 100%;
  height: 14vw;
  border-top: solid 1px #DDD;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.wrapper .footer li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  user-select: none;
  cursor: pointer;
}

.wrapper .footer li p {
  font-size: 2.8vw;
}

.wrapper .footer li i {
  font-size: 5vw;
}
</style>
